<template>
  <div class="menu">
    <div class="systemName">后台管理系统</div>
    <el-menu active-text-color="#2299fb" background-color="#242f42" class="el-menu-vertical" :default-active="currRoute"
      text-color="#fff" router>
      <el-scrollbar>
        <template v-for="item in routes">
          <template v-if="item.meta.isMenu">
            <el-sub-menu v-if="item.meta.hasSubMenu" :index="item.path">
              <template #title>
                <el-icon :size="16">
                  <component :is="item.meta.icon"></component>
                </el-icon>
                <span>{{ item.meta.title }}</span>
              </template>
              <template v-for="it in item.children">
                <template v-if="it.meta.isMenu">
                  <el-menu-item :index="item.path + '/' + it.path">
                    <span>{{ it.meta.title }}</span>
                  </el-menu-item>
                </template>
              </template>
            </el-sub-menu>
            <el-menu-item v-else :index="item.path">
              <el-icon :size="16">
                <component :is="item.meta.icon"></component>
              </el-icon>
              <span>{{ item.meta.title }}</span>
            </el-menu-item>
          </template>
        </template>
      </el-scrollbar>
    </el-menu>
  </div>
</template>

<script lang="ts" setup>
import { computed, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router'
import { storeToRefs } from 'pinia';
import { useUserStore } from '@/store'

let route = useRoute()
let router = useRouter()

let currRoute: any = ref('')

// 这里这个坑，我踩了挺久的，刷新页面，获取不到正确的路由值，设置定时器延迟，能获取到正确的值，偶然想起来还有onReady，vue-router4中被替换成isReady
router.isReady().then(() => {
  console.log(route.meta.activeMenu)
  currRoute.value = route.meta.activeMenu
})

let routes: any = ref([])
let User = useUserStore()
let { allRoutes } = storeToRefs(User)
// 获取所有路由
routes = computed(() => {
  return allRoutes.value
})
</script>

<style lang="scss">
.menu {
  background-color: #242f42;
  height: 100vh;
  overflow: hidden;

  .el-menu-vertical:not(.el-menu--collapse) {
    width: 260px;
    height: calc(100vh - 60px);
    border: none;
    padding-bottom: 30px;
    overflow-y: overlay;
  }

  .systemName {
    margin: 0 15px;
    text-align: center;
    height: 60px;
    line-height: 60px;
    color: #fff;
    border-bottom: 1px solid #ccc;
  }

}
</style>